<template>
<videoPlay v-bind="options" poster='https://go.dreamwq.com/videos/ironMan.jpg' />
</template>

<script setup>
import 'vue3-video-play/dist/style.css';
import { videoPlay } from 'vue3-video-play';
import { reactive } from 'vue'
import { useRoute } from 'vue-router';

const options = reactive({
    width: '100%px', //播放器高度
    height: '450px', //播放器高度   
    color: "#409eff", //主题色
    title: '', //视频名称
    //src: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4", //视频源
    src: '',
    muted: false, //静音
    webFullScreen: false,
    speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
    autoPlay: false, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false,  //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制器    
})

const route = useRoute();

const loadData = ()=>{
    options.src = route.query.url;
}
loadData();

</script>

<style lang='stylus' scoped></style>
